import React,{Component} from "react";

import Tipmsg from "../../components/tipmsg"

import "./index.css";

import {sendCode,checkCode,updateUserinfo} from "../../api/course.js"


class Index extends Component{
    constructor(props){
    	super(props);
    	this.state = {
    		tel:"",
    		messageId:"",
    		code:"",
    		num:60,
    		isShow:true,
        msg:"",
        showTip:false

    	}
    }

    closeHandl(){
      this.setState({
            showTip:false
      })
    }
    
    sendHandl(){  //提交事件
    	 let {tel,messageId,code} = this.state;
    	 let reg = /^1\d{10}$/ig;
       
       if(tel.trim()==""){
           this.setState({
               msg:"手机号不能为空",
               showTip:true

           })
           return
        }


        if(!reg.test(tel)){
            this.setState({
               msg:"手机号格式不正确",
               showTip:true

            })
            return
        }
        
        /*if(code.trim()==""){
            this.setState({
               msg:"验证码不能为空",
               showTip:true
            })
            return
        }*/


      let userinfo = JSON.parse(localStorage.getItem("courseUserinfo"));
    	let token = userinfo.AccessToken;
    	
      userinfo.PhoneNumber = tel;
      updateUserinfo(token,userinfo).then(res=>{
         console.log(res);
         this.props.history.goBack();
      })

    	
     /* checkCode(tel,messageId,code).then(res=>{
             if(res.data.Result){
             	  userinfo.PhoneNumber = tel;
                updateUserinfo(token,userinfo).then(res=>{
                	 console.log(res);
                   this.props.history.goBack();
                })
             }  
        }).catch(err=>{
           this.setState({
               msg:"验证码错误",
               showTip:true

           })
        })*/
    }


    sendCodeHandl(){  //发送验证码
    	  let {tel} = this.state;
        var reg = /^1\d{10}$/ig;
        if(tel.trim()==""){
           this.setState({
               msg:"手机号不能为空",
               showTip:true

           })
           return
        }

        if(!reg.test(tel)){
            this.setState({
               msg:"手机号格式不正确",
               showTip:true

            })
            return
        }


     
        sendCode(tel).then(res=>{
     
            this.setState({
            	messageId:res.data.MessageId
            })
        	
        })
        
        var timer = setInterval(()=>{
        	    this.setState({
        	    	  isShow:false,
        	    	  num:this.state.num-1
        	    },()=>{
        	    	  if(this.state.num===0){
        	    	  	  clearInterval(timer);
                      this.setState({
                      	 isShow:true,
                      	 num:60
                      })
        	    	  }
        	    
        	    })
        },1000)
    }

	render(){
		return(
            <div className="bindphone">
                <div className="bindphone-header">
                    <span className="back" onClick={()=>{
                      this.props.history.goBack()
                    }}></span>
                    完善资料
                </div>
                <p className="tel">
                  <input type="text" placeholder="请输入您的手机号" value={this.state.tel}
                   onChange={(ev)=>{
                   	 this.setState({
                   	 	 tel:ev.target.value
                   	 })
                   }}/>
                </p>
                {/*<p className="code">
                                  <input type="text" value={this.state.code} 
                                  placeholder="请填写验证码"
                                  onChange={(ev)=>{
                                       this.setState({
                                            code:ev.target.value
                                       })
                                   }}/>
                                  <span className="num">{this.state.num}</span>
                                  {this.state.isShow?<span className="send" onClick={this.sendCodeHandl.bind(this)}>获取验证码</span>:null}
                                  
                                </p>*/}
                <button onClick={this.sendHandl.bind(this)}>提交</button>

                {/*this.state.showTip?<div className="tip"><span>{this.state.msg}</span></div>:null*/}
                {this.state.showTip?<Tipmsg msg={this.state.msg} closeHandl={this.closeHandl.bind(this)}/>:null}
            </div>
		)
	}
}

export default Index